<template>
  <div class="publish-container">
    <el-breadcrumb separator-class="el-icon-arrow-right" v-if="breaShow">
    <el-breadcrumb-item :to="{ path: '/page' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/page/group' }">小组列表</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: `/page/group/groupdetail/${groId}` }" >组内空间</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: `/page/group/page/group/articleshow/${listId}/${groId}` }" >文章详情</el-breadcrumb-item>
    <el-breadcrumb-item>文章编辑</el-breadcrumb-item>
  </el-breadcrumb>
  <el-breadcrumb separator-class="el-icon-arrow-right" v-else>
    <el-breadcrumb-item :to="{ path: '/page' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/page/group' }">小组列表</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: `/page/group/groupdetail/${groId}` }" >组内空间</el-breadcrumb-item>
    <el-breadcrumb-item>文章编辑</el-breadcrumb-item>
  </el-breadcrumb>
    <el-card class="box-card" v-if="isShow">
      <el-form ref="form" :model="article" label-width="120px">
        <el-form-item label="文章标题">
          <el-input v-model="article.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容">
          <el-tiptap
            v-model="article.content"
            :extensions="extensions"
            height="800"
            placeholder="请输入文章内容"
          ></el-tiptap>
        </el-form-item>
        <el-tooltip content="若不上传则为小柚智汇默认封面" placement="left">
          <el-form-item label="封面">
            <!-- 封面裁剪 -->
            <div class="cropper-app">
              <el-upload
                action="#"
                class="btn"
                drag
                :auto-upload="true"
                :show-file-list="false"
                :on-change="handleCrop"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  class="Group-img"
                  v-if="loadingtext"
                  title="点击更换封面"
                  style="width: 100px; height: 100px"
                  :src="article.cover"
                />
                <el-button
                  plain
                  round
                  class="img-btn"
                  v-if="!loadingtext"
                  size="mini"
                  >添加封面</el-button
                >
              </el-upload>

              <!-- 剪裁组件弹窗 -->
              <cropperImage
                :dialogVisible="showCropper"
                :cropper-option="cropperOption"
                :file-size="fileSize"
                :cropper-style="cropperStyle"
                @close="showCropper = false"
                @uploadCropper="uploadImg"
              />
            </div>
          </el-form-item>
        </el-tooltip>
        <el-form-item label="文章类别">
          <el-select v-model="article.cid" placeholder="请选择标签类别">
            <el-option
              :label="item.name"
              :value="item.name"
              v-for="item in channels"
              :key="item.cid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="onPublish">发表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" v-if="isEdit">
      <el-form ref="form" :model="article" label-width="120px">
        <el-form-item label="文章标题">
          <el-input v-model="article.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容">
          <el-tiptap
            v-model="article.content"
            :extensions="extensions"
            height="800"
            placeholder="请输入文章内容"
          ></el-tiptap>
        </el-form-item>
        <el-tooltip content="若不上传则为小柚智汇默认封面" placement="left">
          <el-form-item label="封面">
            <!-- 编辑封面裁剪 -->
            <div class="cropper-app">
              <el-upload
                action="#"
                class="btn"
                drag
                :auto-upload="true"
                :show-file-list="false"
                :on-change="handleCrop"
                :before-upload="beforeAvatarUpload"
              >
                <el-button class="img-btn" v-if="!loadingtext" size="mini"
                  >添加封面</el-button
                >
                <img
                  class="Group-img"
                  v-if="loadingtext"
                  title="点击更换封面"
                  style="width: 100px; height: 100px"
                  :src="article.cover"
                />
              </el-upload>

              <!-- 剪裁组件弹窗 -->
              <cropperImage
                :dialogVisible="showCropper"
                :cropper-option="cropperOption"
                :file-size="fileSize"
                :cropper-style="cropperStyle"
                @close="showCropper = false"
                @uploadCropper="uploadImg"
              />
            </div>
          </el-form-item>
        </el-tooltip>
        <el-form-item label="文章类别">
          <el-select v-model="article.cid" placeholder="请选择标签类别">
            <el-option
              :label="item.name"
              :value="item.name"
              v-for="item in channels"
              :key="item.cid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="onPublish">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import cropperImage from '@/views/pageIn/mine/components/Copper.vue'

import {
  getTag,
  addArticle,
  updateDoc,
  getArchive,
  updatImg
} from '@/utils/api/articleTag.js'
import {
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  HorizontalRule,
  Fullscreen,
  Preview,
  CodeBlock,
  TextColor,
  FormatClear,
  Table,
  TableHeader,
  TableCell,
  TableRow,
  History,
  TrailingNode,
  HardBreak,
  LineHeight,
  Indent
} from 'element-tiptap'
export default {
  name: '',
  components: {
    'el-tiptap': ElementTiptap,
    cropperImage
  },
  props: {
    listId: {
      required: true
    },
    groId: {
      required: true
    }
  },
  data () {
    return {
      breaShow: true,
      cropperData: {},
      showCropper: false, // 显示裁剪弹窗
      canCropper: false,
      loadingtext: false,
      fileSize: 2, // 限制文件上传大小
      formate: new FormData(),
      cropperOption: {
        img: '',
        autoCropWidth: 300,
        autoCropHeight: 180
      },
      cropperStyle: {
        width: '600px',
        height: '300px'
      },
      // 编辑器的 extensions
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 3 }),
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Underline(), // 下划线
        new Italic(), // 斜体
        new Strike(), // 删除线
        new HorizontalRule(), // 华丽的分割线
        new ListItem(),
        new BulletList(), // 无序列表
        new OrderedList(), // 有序列表
        new TodoItem(),
        new TodoList(),
        new Fullscreen(),
        new Preview(),
        new CodeBlock(),
        new TextColor(),
        new FormatClear(),
        new Table({ resizable: true }),
        new TableHeader(),
        new TableCell(),
        new TableRow(),
        new History(),
        new TrailingNode(),
        new HardBreak(),
        new HorizontalRule(),
        new LineHeight(),
        new Indent()
      ],
      channels: [], // 文章类别标签(由组长设置的)
      article: {
        title: '', // 文章标题
        content: '', // 文章内容
        cid: '',
        url: '...',
        cover: ''
      },
      theList: {},
      dialogVisible: false,
      isShow: true,
      isEdit: false
    }
  },
  created () {
    if (this.listId === -1) {
      this.breaShow = false
      this.isShow = true
      this.isEdit = false
    } else {
      this.breaShow = true
      this.getList()
      this.isShow = false
      this.isEdit = true
    }
    this.loadChannels()
  },
  methods: {
    // 点击弹出剪裁框
    handleCrop (file) {
      this.$nextTick(() => {
        if (this.canCropper) {
          this.cropperOption.img = window.URL.createObjectURL(file.raw)
          this.showCropper = this.canCropper
        }
      })
    },
    // 上传前校验
    beforeAvatarUpload (file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2 MB!')
      }
      // 校验通过后显示裁剪框
      this.canCropper = isJPG && isLt2M
      return false
    },
    // 自定义的图片提交事件
    uploadImg (f, data) {
      const formdata = new FormData()
      formdata.append('pic', f)
      this.loadingtext = true
      this.cropperData.iconUrl = data
      this.showCropper = false
      this.formate = formdata
      updatImg(formdata).then(res => {
        this.article.cover = res.data.name
      })
    },
    // 获取文章分类标签
    loadChannels () {
      getTag(this.listId).then(res => {
        this.channels = res.data.data
      })
    },
    // 获取文章信息
    getList () {
      getArchive(this.listId).then(res => {
        this.theList = res.data.data
        this.article.title = this.theList.docname
        this.article.content = this.theList.content
        this.article.cid = this.cid
        this.article.url = this.theList.url
        this.article.cover = this.theList.cover
        this.loadingtext = true
      })
    },
    // 发布
    onPublish () {
      const data = {
        content: this.article.content,
        cover: this.article.cover,
        docname: this.article.title,
        identity: this.article.cid,
        creatorID: this.groId
      }
      if (!data.identity) {
        data.identity = '文档'
      }
      if (!data.docname) {
        data.docname = '这是一篇文章'
      }
      if (this.listId === -1) {
        addArticle(data)
          .then(res => {
            if (res.data.code === 200) {
              this.$notify({
                title: '发布文章成功',
                type: 'success'
              })
              this.$router.go(-1)
            }
          })
          .catch(() => {
            this.$message({
              message: '发布文章失败',
              type: 'error'
            })
          })
      } else {
        updateDoc(data, this.listId)
          .then(res => {
            if (res.data.code === 200) {
              this.$message({
                message: '编辑文章成功',
                type: 'success'
              })
            }
            this.$router.go(-1)
          })
          .catch(() => {
            this.$message({
              message: '修改文章失败',
              type: 'error'
            })
          })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
  margin-top: 20px;
}
.cropper-app {
  /deep/ .el-dialog {
    width: max-content;
    max-width: 860px;
    height: 520px;
  }
  /deep/ .el-image__inner {
    overflow: hidden;
    border-radius: 6px;
  }
  .img-btn {
    width: 100%;
    height: 100%;
    font-size: 28px;
    color: #aaa;
  }
  .img-btn:hover {
    opacity: 1;
    transition: 1.5s;
  }
  .Group-img {
    width: 100% !important;
    height: 100% !important;
  }
}
</style>
